<template id='Recommend'>
  <div class="Recommend">
    <div
      class="recommendItem"
      v-for="(item, index) in recommendList"
      :key="index"
    >
      <p class="recommendTitle" v-if="item.title">{{ item.title }}</p>
      <p class="recommendDescTop">
        {{ item.recommendDescTop }}
      </p>
      <img :src="item.img" class="recommengImg" />
      <img :src="item.img2" class="recommengImg2" v-if="item.img2" />
      <p class="recommendDescBottom" v-if="item.recommendDescBottom">
        {{ item.recommendDescBottom }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Recommend",
  components: {},
  data() {
    return {
      recommendList: [
        {
          id: 1,
          img: require("@/assets/images/recommend/01.png"),
          title: "Game",
          recommendDescTop:
            "Evo Surfers is a blockchain civilization gaming platform where all player's actions are on-chain. After entering Evo Surfers, players can earn tokens by contributing to the game's ecosystem. Each ChaCha NFT character is the player's avatar. Players can operate the NFT avatar to participate in the game and improve their winning rate by upgrading the NFT and investing tokens to eventually break through the layers of obstacles and stand at the top of the universe-level civilization.",
          recommendDescBottom:
            "Evo Surfers is different, as the player himself is the participant and creator of the planetary civilization. The player accumulates civilization resources by working and adventuring. Once sufficient, the civilization upgrades. The player advances evolution and technological development.Through their avatar's life in the game, players can accumulate and exchange assets to increase their income. The whole game process is full of opportunities and risks. The timing and degree to which a player grasps them determine how much they will win.",
        },
        {
          id: 2,
          img: require("@/assets/images/recommend/02.png"),
          title: "How to play",
          recommendDescTop: "Explore",
        },
        {
          id: 3,
          img: require("@/assets/images/recommend/03.png"),
          recommendDescTop: "Jobs",
        },
        {
          id: 4,
          img: require("@/assets/images/recommend/04.png"),
          img2: require("@/assets/images/recommend/05.png"),
          recommendDescTop: "Technology and Patents",
        },
        {
          id: 5,
          img: require("@/assets/images/recommend/06.png"),
          recommendDescTop: "Interstellar Development",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {},
};
</script>

<style lang='less' scoped>
.Recommend {
  user-select: none;
  background-image: linear-gradient(#1f273b, #192539);
  padding: 40px 220px 150px 220px;
  text-shadow: 0px 3px #0854bc;
  .recommendTitle {
    display: flex;
    justify-content: center;
    color: #eceaed;
    font-size: 60px;
    line-height: 1.1;
    font-weight: 600;
  }
  .recommendItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 60px;
    .recommendDescTop,
    .recommendDescBottom {
      display: flex;
      justify-content: center;
      color: #eceaed;
      font-size: 54px;
      line-height: 1.1;
      font-weight: 400;
      padding: 0 55px;
      margin: 40px 0;
    }
    .recommengImg,
    .recommengImg2 {
      margin-top: 40px;
      width: 1474px;
      height: 870px;
    }
    .recommengImg2 {
      //   margin-top: 60px;
    }
    .recommendDescBottom {
      margin: 50px 0;
    }
  }
  .recommendItem:nth-child(2) {
    margin-top: 240px;
    .recommendTitle {
      margin-bottom: 45px;
    }
  }
}
@media screen and (max-width: 450px) {
  .Recommend {
    padding-left: 15px;
    padding-right: 15px;
    .recommendItem {
      .recommendDescTop,
      .recommendDescBottom {
        padding: 0 170px;
        text-align: center;
      }
      .recommengImg,
      .recommengImg2 {
        width: 737px;
        height: 435px;
      }
    }
  }
}
</style>